<template>
  <div class="app">
    <van-pull-refresh v-model="isRefresh" @refresh="reload">
      <search-bar :halfGray="true" @changeLastCity="resetLastCity"/>
      <van-swipe 
        :autoplay="3000" 
        indicator-color="#378bf2" 
        class="banner"
        v-if="banners && banners.length"
      >
        <van-swipe-item 
          v-for="(banner, index) in banners" 
          :key="index"
          @click="toPage(banner.link, 1)"
        >
          <img :src="banner.image" :alt="banner.title" v-lazy="banner.image">
        </van-swipe-item>
      </van-swipe>

      <scroll-x-warp :showBar="menusArr.length > 8">
          <div class="menus-list" v-for="(menu, index) in menusArr" :key="index">
            <van-grid :border="false">
              <van-grid-item 
                class="menus-item" 
                v-for="(m, i) in menu" 
                :key="i"
                @click="toPage(m.kind)"
              >
                <img :src="m.icon" v-lazy="m.icon">
                <p>{{m.name}}</p>
              </van-grid-item>
            </van-grid>
          </div>
      </scroll-x-warp>
      
      <list-wrap 
        class="mg-top" 
        :need-filter="false" 
        :need-menus="true"
        v-if="!reloadProdList"
        @catemenus="catemenus"
      />
    </van-pull-refresh>
    
    <slogan class="mg-footer"/>

    <footer-nav page="index"/>
    
    <img-popup v-if="bulletins" :list="bulletins"/>
  </div>
</template>

<script>
  import Search from '@cmpt/header/search'
  import Footer from '@cmpt/footer'
  import ImgPopup from '@cmpt/popup/imgPopup'
  import ListWrap from '@views/product/components/list-wrap'
  import { getBanner } from '@/api/modules/index'
  import { getBulletins } from "@/api/modules/message";
  import ScrollX from '../components/scrollX'
  import Slogan from '@cmpt/slogan'
  import { 
    PullRefresh,
    Swipe, 
    SwipeItem, 
    Icon,
    Grid,
    GridItem,
  } from 'vant'
  export default {
    name: 'app',
    components:{
      [PullRefresh.name]: PullRefresh,
      [Footer.name]: Footer,
      [Swipe.name]: Swipe,
      [SwipeItem.name]: SwipeItem,
      [Icon.name]: Icon,
      [Grid.name]: Grid,
      [GridItem.name]: GridItem,
      [ScrollX.name]: ScrollX,
      [Search.name]: Search,
      [ImgPopup.name]: ImgPopup,
      [ListWrap.name]: ListWrap,
      [Slogan.name]: Slogan
    },
    data(){
      return {
        isRefresh: false,
        banners: null,
        bulletins: null,
        menus: null,
        reloadProdList: false, // 强制刷新产品列表的数据
        menusArr: [[{kind: 'collect', name: '我的收藏', icon: '/static/images/icon/icon-collect.png'}]]
      }
    },
    created() {
      this.getData()

      // 设置微信、app分享
      this.$set_share({
        title: `优采采购中心`,
      })
    },
    methods:{
      catemenus(menus){
        this.menus = menus
        this.setMenusPanle()
      },
      reload() {
        this.getData()
        this.reloadProdList = true
        this.$nextTick( () => {
          this.reloadProdList = false
        })
        setTimeout(() => {
          this.isRefresh = false
        }, 500);
      },
      async getData() {
        // 获取重要公告
        getBulletins().then(res => {
          this.bulletins = res.data.messages
        })
        
        // 获取banner
        getBanner(1)
          .then(res => {
            this.banners = []
            res.data.forEach(item => {
              if(item.length > 0){
                this.banners = item.filter(b => {
                  return (Number(b.is_hidden) == 0 && Number(b.position) == 1)
                })
              }
            })
            this.bannersShow = this.banners.length > 0
          })
      },
      // 计算中间按钮的排版
      setMenusPanle() {
        let menu = [{kind: 'collect', name: '我的收藏', icon: '/static/images/icon/icon-collect.png'}]
        menu = menu.concat(this.menus)
        let subArr = []
        const panelNum = 8,
          mdata = menu,
          menusPanel = Math.ceil(mdata.length / panelNum)
          for(let i = 0; i < menusPanel; i++){
            subArr[i] = new Array();
            for(let j = 0; j < mdata.length; j++){
              let min = (i > 1 ? (i - 1) : i) * panelNum,
                  max = i * panelNum
                  max = max > min ? max : min + panelNum
              if(j < max && j >= min){
                subArr[i].push(mdata[j]);
              }
            }
          }
          this.menusArr = subArr
      },
      // 切换最后的城市。。。
      resetLastCity(code) {
        this.reloadProdList = true
        this.$nextTick( () => {
          this.reloadProdList = false
        })
      },
      // 跳转页面
      toPage(key, outerLink) {
        if(outerLink && key){
          window.location.href = key
          return
        }
        let url = 'product/list'
        let param = {
          kind: (key >= 0) ? key : 'all'
        }
        if(key === 'collect'){
          url = 'product/collect'
          param = null
        }
        this.$goPage(url, param)
      }
    }
  }
</script>

<style lang="less" scoped>
  @import "~@style_m/basic/utils/index";
  .banner {
    height: 140px;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  .menus-list {
    background: white;
    flex: 0 0 100%;
    line-height: 1;
    font-size: 12px;
    .menus-item {
      padding: 10px 8px;
    }
    img {
      width: 40px;
      height: 40px;
      border-radius: 5px;
      object-fit: fill;
    }
    p{
      margin-top: 5px;
    }
  }
</style>
